<template>
	<view>
		
		<view class="list">
		<view class="article-item">
		<!-- 头像 -->
		<view class="avatar-group" @tap="toDetail(articleInfo.user.id)">
			<view class="avatar">
				<image :src="articleInfo.user.user_icon" mode="aspectFill" class="img" />
				<view class="man" v-if="articleInfo.user.sex == 0">
					<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
				</view>
				<view class="woman" v-else-if="articleInfo.user.sex == 1">
					<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" />
				</view>
			</view>
		</view>
		
		<view class="main">
			<!-- 昵称 -->
			<view class="name">
				<view class="name-text" @tap="toDetail(articleInfo.user.id)">
					{{ articleInfo.user.username }}
				</view>
				<image v-if="articleInfo.user.is_vip==1" class="name-vip" src="@/static/images/vip/vip.png" mode="aspectFill" />
			</view>
		
			<!-- 位置，时间 -->
			<view class="position-group">
				<text>{{ articleInfo.position }}</text>
				<text class="line" v-if="articleInfo.position!=''">|</text>
				<text>{{ articleInfo.create_time }}</text>
			</view>
			
			<!-- 文本内容 -->
			<view class="content">
				{{ articleInfo.text }}
			</view>
		
			<!-- 相片列表 -->
			<view class="photo" v-if="articleInfo.type == 1">
				<!-- 只有一张相片时 -->
				<view class="only" v-if="articleInfo.image.length < 2">
					<view class="item" v-for="(photo, pIndex) in articleInfo.image" :key="pIndex" @tap="previewImage(pIndex)">
						<image :src="photo" mode="aspectFill" />
					</view>
				</view>
				<!-- 超过一张相片时 -->
				<view class="plural" v-if="articleInfo.image.length > 1">
					<cl-row :gutter="21">
						<cl-col
							:span="8"
							v-for="(photo, pIndex) in articleInfo.image"
							:key="pIndex"
							@tap="previewImage(pIndex)"
						>
							<view class="item">
								<image :src="photo" mode="scaleToFill" />
							</view>
						</cl-col>
					</cl-row>
				</view>
			</view>
		
			<!-- 底部功能按钮 -->
			<view class="bottom">
				<!-- 点赞 -->
				<view class="bottom-item like">
					<template v-if="articleInfo.is_praise == 1">
						<image src="@/static/images/article/like.png"  @tap="canclePraise(articleInfo.id)"/>
					</template>
					<template v-else>
						<image src="@/static/images/article/no_like.png"  @tap="praise(articleInfo.id)"/>
					</template>
					 <view class="text">
					 	{{articleInfo.praise_num}}
					 </view>
				</view>
		
				<!-- 评论 -->
				<view class="bottom-item comment">
					<image src="@/static/images/article/dazhaohu.png" mode="aspectFill" /> 
					<view class="text">
						{{articleInfo.comment_num}}
					</view>
				</view>
			</view>
		</view>
		
		</view>
		</view>
		
		
		<view class="uni-padding-wrap">
		    <!-- 评论区 start -->
			<view class="comment-text">评论</view>
		    <view class="uni-comment">
				<block v-for="(item,index) in commentList" :key="index">
					<view class="uni-comment-list">
					    <view class="uni-comment-face" @tap="toDetail(item.user.id)">
					        <image lazy-load="true" :src="item.user.user_icon" mode="widthFix"></image>
					    </view>
					    <view class="uni-comment-body">
					        <view class="uni-comment-top" @tap="toDetail(item.user.id)">
					            <text>{{item.user.username}}</text>
					        </view>
					        <view class="uni-comment-date">
					            <text>{{item.create_time}}</text>
					        </view>
					        <view class="uni-comment-content">{{item.text}}</view>
					    </view>
					</view>
				</block>
				
				<load-more :loadText="loadText"></load-more>
		    </view>
		</view>
		
		<view class="comment-input">
			<input style="width: 80%;"  placeholder="说点什么吧..." class="comment-input-value" placeholder-style="color:#D1D1D1" v-model="commentText"/>
			<view class="comment-input-text" @tap="comment()">发送</view>
		</view>
			
	</view>
</template>

<script>
	import loadMore from "../../components/load-more.vue";
	export default {
		components:{
			loadMore,
		},
		data() {
			return {
				articleInfo:{
					user:{
						id:1,
						user_icon:"",
						sex:0,
						username:"",
					}
				},
				commentText:"",
				commentList:[],
				page: 1,
				articleId: 0,
				loadText: "加载中...",
				hasMore: true,
			};
		},
		onLoad(option){
			this.articleId = option.articleId;
			this.getArticleDetail();
			this.getCommentList();
		},
		onReachBottom(){
			this.getCommentList();
		},
		methods:{
			previewImage(index){
				uni.previewImage({
					urls: this.articleInfo.image,
					indicator:"number",
					current: index,
				})
			},
			// 前往详情
			toDetail(uid) {
				uni.navigateTo({
					url: "/pages/detail/index?uid=" + uid,
				});
			},
			reachBottom(){
				this.getCommentList();
			},
			async getArticleDetail(){
				let [err,res] = await this.$http.get('Article/detail',{
					article_id: this.articleId
				});
				
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				
				this.articleInfo = res.data.data;
			},
			async getCommentList(){
				if(!this.hasMore){
					return;
				}
				
				let [err,res] = await this.$http.get('Comment/lists',{
					article_id: this.articleId
				});
				
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				
				if(res.data.data.length == 0 || res.data.data.length < 10){
					this.hasMore = false;
					this.loadText = "没有更多了...";
				}
				
				this.page++;
				
				this.commentList = this.commentList.concat(res.data.data);
				
				console.log(this.commentList);
			},
			async praise(articleId){
				let [err,res] = await this.$http.post('Praise/add',{
					article_id: articleId
				});
				
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				
				this.articleInfo.is_praise = 1;
				this.articleInfo.praise_num++;
			},
			async canclePraise(articleId){
				let [err,res] = await this.$http.post('Praise/cancle',{
					article_id: articleId
				});
				
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				
				this.articleInfo.is_praise = 0;
				this.articleInfo.praise_num--;
			},
			async comment(){
				if(this.commentText == ""){
					uni.showToast({ title: '请输入评论内容', icon: 'none'});
					return;
				}
				
				let [err,res] = await this.$http.post('Comment/add',{
					article_id: this.articleInfo.id,
					text: this.commentText
				});
				
				if(!this.$http.errorCheck(err,res)){
					if(res.data.errno == 10000){
						setTimeout(function() {
							uni.navigateTo({
								url:'/pages/vip/vip'
							})
						}, 1000);
					}
					return;
				}
				
				this.commentList.unshift({
					user:{
						user_icon:this.User.userinfo.user_icon,
						username:this.User.userinfo.username
					},
					create_time:"刚刚",
					text:this.commentText
				});
				
				this.commentText = "";
				uni.showToast({ title: '发布成功', icon: 'none'});
			}
		}
	};
	
	
</script>

<style lang="scss" scoped>
.list {
		width: calc(100% - 60rpx);
		margin: 0 30rpx 10rpx 30rpx;
		border-bottom: 2rpx solid #f5f5f5;
		.article-item {
			margin-top: 10rpx;
			display: flex;
			position: relative;
			margin-bottom: 10rpx;
			.more {
				position: absolute;
				top: 0;
				right: 30rpx;
				width: 35rpx;
				height: 8rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.avatar-group {
				.avatar {
					position: relative;
					width: 80rpx;
					height: 80rpx;
					margin-right: 30rpx;
					.img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					.man {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						width: 30rpx;
						height: 30rpx;
						background-color: #58bcff;
						border-radius: 50%;
						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
					.woman {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						width: 30rpx;
						height: 30rpx;
						background-color: #ff5a70;
						border-radius: 50%;
						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
			.main {
				width: 100%;
				.name {
					display: block;
					margin-bottom: 5rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #282828;
				}
				.name-text{
					font-size: 26rpx;
					font-weight: bold;
					color: #282828;
					line-height: 40rpx;
					margin-right: 10rpx;
				}
				.name-vip{
					width: 40rpx;
					height: 40rpx;
				}
				.position-group {
					margin-bottom: 10rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #b1b1b1;
					.line {
						margin: 0 10rpx;
					}
				}
				.photo {
					margin-bottom: 10rpx;
					.only {
						image {
							width: 336rpx;
							height: 336rpx;
							border-radius: 18rpx;
						}
					}
					.plural {
						.item {
							height: 200rpx;
							display: flex;
							position: relative;
							margin-bottom: 10rpx;
							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 18rpx;
							}
						}
					}
				}
				.content {
					margin-bottom: 10rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #282828;
					word-break: break-all;
				}
				.bottom {
					display: flex;
					align-items: center;
					justify-content:flex-end;
					width: 100%;
					
					&-item {
						display: flex;
						align-items: center;
						image {
							width: 42rpx;
							height: 42rpx;
							margin-right: 12rpx;
						}
						.text{
							color: #b1b1b1;
							font-size: 21rpx;
						}
					}
					.comment{
						margin-right: 60rpx;
					}
					.like {
						margin-right: 60rpx;
					}
				}
			}
		}
	}
	
.uni-padding-wrap{
	padding: 0rpx 30rpx 100rpx 30rpx;
	view {
	    font-size: 28upx;
	}
	.comment-text{
		font-weight: bold;
		color: #b1b1b1;
	}
	
	.uni-comment {
	    padding: 5rpx 0;
	    display: flex;
	    flex-grow: 1;
	    flex-direction: column;
	}
	
	.uni-comment-list {
	    flex-wrap: nowrap;
	    padding: 10rpx 0;
	    margin: 10rpx 0;
	    width: 100%;
	    display: flex;
	}
	
	.uni-comment-face {
	    width: 70upx;
	    height: 70upx;
	    border-radius: 100%;
	    margin-right: 20upx;
	    flex-shrink: 0;
	    overflow: hidden;
	}
	
	.uni-comment-face image {
	    width: 100%;
	    border-radius: 100%;
	}
	
	.uni-comment-body {
	    width: 100%;
	}
	
	.uni-comment-top {
	    line-height: 1.5em;
	    justify-content: space-between;
	}
	
	.uni-comment-top text {
	    color: #0A98D5;
	    font-size: 24upx;
	}
	
	.uni-comment-date {
	    line-height: 38upx;
	    flex-direction: row;
	    justify-content: space-between;
	    display: flex !important;
	    flex-grow: 1;
		color: #b1b1b1;
	}
	
	.uni-comment-date view {
	    color: #666666;
	    font-size: 24upx;
	    line-height: 38upx;
	}
	
	.uni-comment-content {
	    line-height: 1.6em;
	    font-size: 28upx;
	    padding: 8rpx 0;
	}
	
	.uni-comment-replay-btn {
	    background: #FFF;
	    font-size: 24upx;
	    line-height: 28upx;
	    padding: 5rpx 20upx;
	    border-radius: 30upx;
	    color: #333 !important;
	    margin: 0 10upx;
	}
	
}
.comment-input{
	display: flex;
	background-color: #F9F9F9;
	justify-content:space-between;
	padding: 30rpx 30rpx;
	position: fixed;
	bottom: 0rpx;
	left:0rpx;
	right: 0rpx;
	height: 40rpx;
	.comment-input-text{
		color: #A1A1A1;
	}
}
</style>
